<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/competition-common :: common_head(~{::link},~{::script})">
    <meta charset="utf-8">
    <link rel="stylesheet" href="/styles/mall/index.css">
    <script src="/javascript/mall/index.js" type="text/javascript"></script>
</head>
<body>
<div th:replace="common/competition-common::mall-header"></div>
<div th:replace="common/competition-common::competition-sidebar"></div>
<div class="mall-body" style="margin-right: 50px">
    <div id="homeBanner" class="carousel slide home-banner">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#homeBanner" data-bs-slide-to="0" class="active"
                    aria-current="true"  aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#homeBanner" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#homeBanner" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="/images/carousel1.png" class="d-block w-100  h-100">
            </div>
            <div class="carousel-item">
                <img src="/images/carousel2.jpg"
                     class="d-block w-100  h-100">
            </div>
            <div class="carousel-item">
                <img src="/images/carousel3.jpeg"
                     class="d-block w-100 h-100">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#homeBanner" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#homeBanner" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    <div class="pagetitle">
        <h1>热门赛事</h1>
    </div>
    <section class="section">
        <div class="row align-items-top">
            <div class="col-lg-4" th:each="competitions:${competitionsDTOS}">

                <div class="card">
                    <a th:href="${'/competition/competition-details?comId=' + competitions.getComid()}">
                    <img th:src="${competitions.getEventpictures()}" width="410" height="240"  class="goods-image"/>
                    </a>
                    <div class="card-body">
                        <img  class="card-title" th:src="${competitions.getComlogo()}" width="70" height="70"/>
                        <span th:text="${competitions.getComname()}" ></span>
                        <p class="card-text" th:text="${competitions.getComprofile() }"></p>
                    </div>
                </div>

            </div>
        </div>
    </section>
</div>
<div th:replace="common/competition-common::mall-footerWithoutsidebar"></div>
</body>
</html>